<template>
	<view class="home">
		<custom-navbar title="职位详情" :show-back="true" @back="handleBack" />

		<view class="content" :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="p4030">
				<view class="position">
					<view class="fcsb mb25">
						<view class="f40bc0">{{positionData.position_name || '前端开发工程师'}}</view>
						<view class="f30bcFF0C10">{{positionData.salary_range_text || '9-20K'}}</view>
					</view>
					<view class="fc mb40 f245c3">
						<view class="fc mr30">
							<image class="wh28 ml5" src="/static/images/talents/位置.svg"></image>
							<view class="ml10">
								{{positionData.province_id_text || '天津'}}·{{positionData.district_id_text || '静海区'}}
							</view>
						</view>
						<view class="fc mr30">
							<image class="wh28 ml5" src="/static/images/talents/经验.svg"></image>
							<view class="ml10">{{positionData.work_experience_text || '3-5年经验'}}</view>
						</view>
						<view class="fc mr30">
							<image class="wh28 ml5" src="/static/images/talents/学历.svg"></image>
							<view class="ml10">{{positionData.education_requirement_text || '本科'}}</view>
						</view>
					</view>
				</view>
				<up-line></up-line>
				<view class="enterprise mt40 mb40 fcsb" @click="handleCompany">
					<view class="fc">
						<!-- <view class="wh70"></view> -->
						<image class="wh70" :src="positionData.company?.institution_logo"></image>
						<view class="ml25">
							<view class="f265c0 mb10">{{positionData.company?.enterprise_name || '爱玛电动车有限公司'}}</view>
							<view class="f225c9">{{positionData.company?.enterprise_size || '1000-10000'}}人 ·
								{{positionData.company?.enterprise_address || '天津静海区高新科技园D栋'}}
							</view>
						</view>
					</view>
					<image class="wh26" src="/static/images/talents/更多.svg"></image>
				</view>
				<up-line></up-line>
				<view class="mt40 particulars w100">
					<view class="f30bc3 mb10">
						职位详情
					</view>
					<!-- 	<view class="industry mb40" style="display: flex; flex-wrap: wrap;gap: 20rpx;">
						<view class="item f205cA1A1A1 f20" v-for="(item,index) in list" :key="index">
							{{item.lable}}
						</view>
					</view> -->
					<view class="f265c3 mb20">
						<mp-html :content="positionData.position_description" />
					</view>
					<!-- 	<view class="f265c3" v-if="!positionData.position_description">

						任职要求： 1.计算机相关专业; 2.掌握web前端开发技术:JavaScript/TypeScript、HTML、CSS相关基础知识; 3.具有前端主流开发 React/Vue
						至少一种开发经验(优先 Vue )，可编写高性能、可维护、 4.具备良好的沟通能力、较强的责任心和团队协作精神、优秀的分析和解决问题的能力
					</view> -->
				</view>
			</view>
		</view>
		<view class="share w100 p2030 fcsb">
			<view class="fcolcc" @click="toggleCollection">
				<image class="wh40"
					:src="positionData.is_collection ? '/static/images/talents/已收藏.svg' : '/static/images/talents/未收藏.svg'">
				</image>
				<view class="f20bc3">{{positionData.is_collection ? '已收藏' : '未收藏'}}</view>
			</view>

			<view class="fc">
				<up-button @click="handleResume" style="width: 180rpx;height: 80rpx;" class="mr20" type="error"
					text="填写简历"></up-button>
				<up-button @click="showModal = true" style="width: 380rpx;height: 80rpx;" text="我要求职"
					color="linear-gradient( 90deg, #398DFB 0%, #61DBFF 100%)"></up-button>
			</view>
		</view>
		<supplyModal v-model:visible="showModal" title="我要求职" @confirm="handleConfirm" @cancel="handleCancel">
			<view class="supplyModal">
				<view class="item fcols">
					<view class="flex">
						<image class="img" src='/static/images/supply/enterprise.svg'></image>
						<view class="ml27">
							<view class="f225c9 mb4">企业名称</view>
							<view class="f26bc3">{{positionData.company?.enterprise_name || '爱玛电动车天津公司'}}
							</view>
						</view>
					</view>

				</view>
				<up-line margin='30rpx 0 30rpx 0'></up-line>
				<view class="item fcols">
					<view class="flex ">
						<image class="img" src='/static/images/supply/linkman.svg'></image>
						<view class="ml27">
							<view class="f225c9 mb4">联系人</view>
							<view class="f26bc3">{{positionData.company?.contact_person || '张先生'}}
							</view>
						</view>
					</view>

				</view>
				<up-line margin='30rpx 0 30rpx 0'></up-line>
				<view class="item fcols">
					<view class="flex ">
						<image class="img" src='/static/images/supply/ihpone.svg'></image>
						<view class="ml27">
							<view class="f225c9 mb4">联系电话</view>
							<view class="f26bc3">{{positionData.company?.contact_number || '0755-86971991'}}
							</view>
						</view>
					</view>

				</view>
				<up-line margin='30rpx 0 30rpx 0'></up-line>
				<view class="item fcols">
					<view class="flex mb30">
						<image class="img" src='/static/images/supply/ihpone.svg'></image>
						<view class="ml27">
							<view class="f225c9 mb4">人力资源</view>
							<view class="f26bc3">邮箱：{{positionData.company?.email || '*******@aima.com'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</supplyModal>
	</view>
</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import supplyModal from '@/components/supplyModal.vue';
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		detail
	} from '@/api/talents'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		saveCollection
	} from '@/api/login' // or wherever your API is located
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	// 2. 获取系统信息（同步操作放在setup最前面）
	const systemInfo = uni.getSystemInfoSync()

	// 3. 定义响应式数据
	const searchKey = ref('')
	const positionData = ref({})
	const companyInfo = ref({})

	// 4. 计算属性
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)
	// 供需大厅
	const recruitment_id = ref(null)
	onMounted(() => {
		setTimeout(() => {
			const pages = getCurrentPages()
			const currentPage = pages[pages.length - 1]
			const options = currentPage.options
			recruitment_id.value = options.recruitment_id
			getDetail()
		}, 100)

	})

	const list = ref([{
		lable: '技术博客/开源项目有所贡献'
	}, {
		lable: 'JavaScri'
	}, {
		lable: 'Vue'
	}, {
		lable: 'Node.js'
	}, {
		lable: 'React'
	}, {
		lable: '计算机/软件工程相关专业'
	}, {
		lable: '前端开发经验'
	}, {
		lable: '架构师经验'
	}])
	const showModal = ref(false);

	// 获取职位详情
	const getDetail = async () => {
		try {



			const res = await detail(recruitment_id.value)
			if (res.code === 200) {
				positionData.value = res.data.data
				companyInfo.value = res.data.data.company || {}
			}
		} catch (e) {
			console.error('获取职位详情失败:', e)
		}
	}


	const toggleCollection = async () => {
		try {
			const res = await saveCollection({
				type: 3, // 3 represents talents
				collection_id: recruitment_id.value // using position_id as the collection_id
			})

			if (res.code === 200) {
				positionData.value.is_collection = !positionData.value.is_collection // toggle collection status
				uni.showToast({
					title: positionData.value.is_collection ? '收藏成功' : '已取消收藏',
					icon: 'none'
				})
				getDetail()
			} else {
				throw new Error(res.message || '操作失败')
			}
		} catch (error) {
			console.error('收藏操作失败:', error)
			uni.showToast({
				title: error.message,
				icon: 'none'
			})
		}
	}
	const handleBack = () => {
		uni.navigateBack()
	};

	const handleResume = () => {
		uni.navigateTo({
			url: `/pages/resume/index`
		});
	}
	const handleCompany = () => {
		uni.navigateTo({
			url: `/pages/talents/company?enterprise_id=${companyInfo.value.enterprise_id}`
		});
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		position: relative;

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 70rpx);
			/* 导航栏高度 */
			display: flex;
			flex-direction: column;

			// align-items: center;
			// justify-content: center;
			background: #ffffff;

			.particulars {
				.industry {
					.item {
						padding: 0 20rpx;
						height: 44rpx;
						background: rgba(146, 146, 146, 0.1);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
					}
				}

			}
		}

		.share {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;

			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(41, 44, 54, 0.2);
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.btn {
				width: 500rpx;
				height: 80rpx;
				background: linear-gradient(90deg, #398DFB 0%, #61DBFF 100%);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
			}
		}

		.supplyModal {

			.item {
				// height: 130rpx;
				width: 100%;

				.flex {
					// padding-top: 30rpx;
					box-sizing: border-box;
				}

				.img {
					width: 70rpx;
					height: 70rpx;
				}
			}
		}
	}
</style>